<template>
  <div class="register-container">
    <div class="wrap">
      <form id="myform" name="myform">
        <div id="form" class="form">
          <div class="left">
            <!-- <video src="video/video.mp4" muted loop autoplay></video> -->
            <img src="@/assets/images/注册.png" alt="注册" />
          </div>
          <div class="right">
            <div class="right-con">
              <h1>SIGN UP</h1>
              <div class="register-row">
                <h3>姓名</h3>
                <input
                  id="uname"
                  name="uname"
                  class="text"
                  type="text"
                  required
                  placeholder="请输入姓名"
                  v-model="user.name"
                />
              </div>
              <div class="register-row">
                <h3>身份证号</h3>
                <input
                  id="idCard"
                  class="text"
                  type="text"
                  required
                  placeholder="请输入身份证号"
                  v-model="user.idNumber"
                />
              </div>
              <div class="register-row">
                <h3>密码</h3>
                <input
                  id="upwd"
                  name="upwd"
                  class="text"
                  type="password"
                  required
                  placeholder="密码须为8-17位"
                  v-model="user.password"
                />
              </div>

              <div id="validate" style="color: red"></div>
              <div class="">
                <tr>
                  <h3>性别</h3>
                  <td>
                    <el-radio v-model="user.sex" label="男">男</el-radio>
                    <el-radio v-model="user.sex" label="女">女</el-radio>
                  </td>
                </tr>
              </div>
              <button class="btn" type="button" @click="registerUser">
                REGISTER 注册
              </button>
              <button class="btn" type="reset" @click="resetForm">
                RESET 重置
              </button>
              <div class="to-login">
                <router-link to="/login">登录</router-link>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import {register} from "@/api/user"
export default {
  name: "userRgister",
  data() {
    return {
      user: {
        name: "",
        idNumber: "",
        password: "",
        sex: "男",
        accountBalance:0
      },
      validate: [
        "validName",
        "validIdCardNumber",
        "validPassword",
      ],
      
    }
  },
  methods: {
    validateRegister() {
      const _this = this
      for (let i = 0; i < this.validate.length; i++) {
        const res = eval(this.validate[i])()
        console.log(res)
        if (!res) {
          return false
        }
      }
      return true
      function validName() {
        if (!_this.user.name) {
          _this.$message.error("请输入姓名")
          return false
        }
        return true
      }
      function validPassword() {
        const reg = /^[a-zA-Z0-9]+$/
        const { password } = _this.user
        if(!password){
          _this.$message.error('密码不能为空')
          return false
        }
        if (password.length < 8) {
          _this.$message.error("密码长度不能小于8位")
          return false
        } else if (!reg.test(password)) {
          _this.$message.error("密码只能由字符，数字组成，请重新输入")
        } else if (password.length > 17) {
          _this.$message.error("密码长度最多为17位")
          return false
        }
        return true
      }
      function validIdCardNumber() {
        const reg =/(^\d{15}$)|(^\d{17}(\d|X|x)$)/
        console.log(reg.test(_this.user.idNumber),_this.user.idNumber)
        if (!reg.test(_this.user.idNumber)) {
          _this.$message.error("身份证号码输入不合法，请重新输入")
          return false
        }
        return true
      }
    },
    async registerUser() {
      if (this.validateRegister()) {
        let res = await register(this.user)
        if(res.code == 200){
          this.$message.success('注册成功，请登录')
          this.$router.push('/login')
        }
      }
    },
    resetForm() {
      Object.assign(this.$data, this.$options.data())
    },
  },
}
</script>

<style lang="scss">
.register-container {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: rgb(71, 67, 67);
  }

  body {
    overflow: hidden;
  }
  /* 页面主体部分样式设置 */

  .wrap {
    /* 备选方案2 */
    width: 100%;
    height: 100vh;
    /* 将对象作为弹性伸缩盒展示 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-image: linear-gradient(to right top, #ccd5d9, #b4c9d3, #9dbdce, #85b1c9, #6ca5c5, #61a6bf, #5aa7b8, #57a7af, #7ab0a3, #9eb89f, #bbbea8, #cfc6b9); */
    background-image: linear-gradient(
      to right top,
      #98c7eb,
      #81baf5,
      #77aafd,
      #7f97ff,
      #947ffb,
      #7d89ff,
      #6492ff,
      #4c9aff,
      #00baff,
      #3dd4fc,
      #81ebf3,
      #bdfef1
    );
  }
  .wrap {
    width: 100%;
    background: url("@/assets/images/背景.jpg") no-repeat center;
    /* 固定背景图片达到视觉差效果 */
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
  }
  /* 头部效果 */
  header {
    /* 固定导航栏 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* z-index: 10; */
    padding: 20px 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    overflow: hidden;
    border-bottom: double white 1px;
    background-color: rgba(245, 241, 241, 0.5);
  }
  header ul {
    padding-left: 1000px;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header ul li {
    font-size: 20px;
    font-weight: 400;
    margin-left: 5px;
    transition: all 0.5s linear;
    padding: 10px;
    border-radius: 20px;
  }
  header ul li:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #4a2c79;
    transform: scale(1.2);
  }
  header ul li.active {
    background: rgba(255, 255, 255, 0.5);
    color: #2b1055;
  }
  a:link,
  a:visited {
    color: rgb(17, 17, 17);
    text-decoration: none;
  }
  /* 导航栏部分 */
  .nav {
    padding-right: 50px;
  }
  .nav li {
    padding-right: 15px;
    font-family: "Times New Roman", Times, serif;
  }

  /* logo图标部分 */
  .logo {
    position: absolute;
    top: 20px;
    left: 40px;
  }
  .logo img {
    width: 120px;
    height: 120px;
    border-radius: 60px;
  }

  /* 注册表单样式 */

  .form {
    width: 900px;
    height: 600px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
  }
  /* form左侧  图片部分*/
  .left {
    width: 500px;
    height: 600px;
  }

  .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* form右侧 表单右侧 */
  .right {
    width: 400px;
    height: 600px;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .right-con {
    width: 80%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  /* 生日选择年月日部分 */
  .option {
    /*用div的样式代替select的样式*/

    /* border-radius: 15px; */

    /*盒子阴影修饰作用*/

    box-shadow: 0 0 5px #ccc;

    border: 1px solid #cccccc;

    position: relative;
  }
  .option select {
    /*清除select的边框样式*/
    color: black;

    border: none;

    /*清除select聚焦时候的边框颜色*/

    outline: none;

    /*将select的宽高等于div的宽高*/

    width: 100%;

    height: 30px;

    line-height: 40px;

    /*隐藏select的下拉图标*/

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    /*通过padding-left的值让文字居中*/

    padding-left: 20px;
  }
  /* 注册 标题 */
  h1 {
    font-size: 26px;
    color: #48dac6;
    font-weight: 400;
    padding-bottom: 5px;
  }
  /* 注册 所填内容标题 */
  h3 {
    font-size: 16px;
    font-weight: 400;
    color: #48dac6;
    padding: 17px 0;
    margin-right: 1rem;
    width: 6rem;
  }
  /* 填入表格的文字样式 */
  .text {
    width: 12rem;
    outline: none;
    border: none;
    border-bottom: 1px solid #70b4e3;
    padding: 1rem;
    color: #000000;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  /* 按钮样式 */
  .btn {
    width: 95%;
    height: 35px;
    border-radius: 20px;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 1.125rem;
    margin-left: 1rem;

    background-image: linear-gradient(120deg, #13cdd6 20%, #3feb4b 100%);
  }

  .btn:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  .register-row {
    display: flex;
  }

  .el-input__icon {
    height: 0;
  }
  .el-radio {
    margin-right: 1rem;
  }

  .el-radio__label {
    margin-left: 1rem;
  }
  .to-login {
    margin-top: 1rem;
  }

  input:-internal-autofill-selected {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
</style>
